/* Tailwind Elements: chips.css */

@layer components {
	.chip {
		@apply px-3 py-1.5 whitespace-nowrap cursor-pointer;
		/* Text */
		@apply text-xs text-center;
		/* Rounded */
		@apply rounded;
		/* Flex Columns */
		@apply inline-flex justify-center items-center space-x-2;
		/* Transitions */
		@apply transition-all;
	}

	/* Interactive chips should have a hover state */
	a.chip,
	button.chip {
		@apply hover:brightness-[1.15];
	}

	.chip-disabled,
	.chip:disabled {
		@apply !opacity-50 !cursor-not-allowed active:scale-100;
	}
}
